<template>
  <div 
    id="faq" 
    class="py-24 md:py-32"
    :style="{ backgroundColor: bgColor }"
  >
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <!-- 标题区域 -->
      <div class="text-center max-w-3xl mx-auto mb-16" v-if="showHeader">
        <span :style="{ color: primaryColor }" class="font-medium">常见问题</span>
        <h2 class="text-[clamp(1.75rem,4vw,2.5rem)] font-bold mt-2 mb-4 text-gray-800">您可能关心的问题</h2>
        <p class="text-lg text-gray-600 leading-relaxed">我们收集了客户最常咨询的问题，如果您有其他疑问，欢迎联系我们</p>
      </div>
      
      <!-- 问答列表 -->
      <div class="max-w-3xl mx-auto">
        <!-- 加载状态 -->
        <div v-if="isLoading" class="flex justify-center items-center py-16">
          <div class="flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2" :style="{ borderColor: primaryColor }"></div>
            <p class="mt-4 text-gray-700">正在加载FAQ数据...</p>
          </div>
        </div>
        
        <!-- 问答列表 -->
        <div v-else-if="processedFaqItems.length > 0" class="space-y-4">
          <div 
            v-for="(item, index) in processedFaqItems" 
            :key="index" 
            class="bg-white overflow-hidden shadow-sm transition-all duration-300 hover:shadow-md"
            :style="{ borderRadius: `${itemRadius}px` }"
          >
            <button 
              class="w-full flex justify-between items-center p-6 text-left focus:outline-none transition-colors duration-300 hover:bg-primary/[0.03]"
              @click="toggleFaq(index)"
              :aria-expanded="item.expanded"
            >
              <span class="font-bold text-lg">
                {{ item.question }}
              </span>
              <i 
                class="fa transition-all transform duration-300"
                :class="{
                  'fa-plus': !item.expanded,
                  'fa-minus rotate-45': item.expanded
                }"
                :style="{ color: primaryColor }"
              ></i>
            </button>
            <div 
              class="px-6 pb-6 overflow-hidden transition-all duration-300 ease-in-out"
              :style="{
                maxHeight: item.expanded ? `${item.contentHeight}px` : '0',
                opacity: item.expanded ? '1' : '0',
                paddingTop: item.expanded ? '1rem' : '0'
              }"
              ref="faqContent"
            >
              <p class="text-gray-700" v-html="item.answer"></p>
            </div>
          </div>
        </div>
        
        <!-- 无数据状态 -->
        <div v-else class="py-16 text-center">
          <i class="fa fa-question-circle text-5xl text-gray-300 mb-4"></i>
          <p class="text-gray-700">暂无FAQ数据</p>
        </div>
        
        <!-- 联系入口 -->
        <div 
          v-if="!isLoading && showContactButton"
          class="mt-12 text-center"
        >
          <p class="text-gray-700 mb-4">还有其他问题？</p>
          <a 
            :href="contactLink" 
            :style="{ backgroundColor: primaryColor }"
            class="inline-flex items-center px-6 py-3 text-white rounded-lg hover:opacity-90 transition-all duration-300"
            @click.prevent="handleContactClick"
          >
            联系我们
            <i class="fa fa-arrow-right ml-2"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Faq',
  // 低代码平台元数据
  lowcode: {
    meta: {
      name: 'faq',
      displayName: '常见问题模块',
      description: '展示常见问题和答案的折叠面板组件',
      icon: 'fa-question-circle',
      category: '内容展示',
      version: '1.0.0',
      isContainer: false
    },
    
    configPanel: [
      {
        title: '基本配置',
        fields: [
          {
            name: 'primaryColor',
            label: '主题色',
            type: 'color',
            defaultValue: '#165DFF'
          },
          {
            name: 'bgColor',
            label: '背景色',
            type: 'color',
            defaultValue: '#f9fafb'
          },
          {
            name: 'showHeader',
            label: '显示标题区域',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'dataSourceUrl',
            label: '数据源URL',
            type: 'text',
            defaultValue: '',
            description: 'API接口地址，用于动态加载FAQ数据'
          },
          {
            name: 'autoLoad',
            label: '自动加载数据',
            type: 'boolean',
            defaultValue: true
          }
        ]
      },
      {
        title: '样式配置',
        fields: [
          {
            name: 'itemRadius',
            label: '项圆角大小',
            type: 'number',
            min: 0,
            max: 20,
            defaultValue: 8
          },
          {
            name: 'openFirstByDefault',
            label: '默认展开第一项',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'allowMultipleOpen',
            label: '允许同时展开多项',
            type: 'boolean',
            defaultValue: false
          }
        ]
      },
      {
        title: '内容配置',
        fields: [
          {
            name: 'faqItems',
            label: '问答列表',
            type: 'array',
            description: '常见问题和答案的列表',
            defaultValue: [
              {
                question: '你们的解决方案适合哪些行业？',
                answer: '我们的解决方案具有很强的行业适应性，已成功应用于金融、制造、零售、医疗、教育、物流等多个行业。我们会根据不同行业的特点和需求，提供定制化的解决方案，确保系统能够满足行业特定的业务流程和合规要求。'
              },
              {
                question: '实施一套系统需要多长时间？',
                answer: '实施周期取决于解决方案的复杂度、企业规模和定制化需求。基础版方案通常可以在1-3个月内完成实施；企业版方案需要3-6个月；而大型定制化项目可能需要6-12个月。我们会在项目启动前提供详细的实施计划和时间节点。'
              },
              {
                question: '系统上线后提供哪些支持服务？',
                answer: '我们提供全方位的售后支持服务，包括系统运维、故障排除、性能优化、版本升级等。根据不同的服务方案，我们提供工作日8小时或7×24小时的技术支持。此外，我们还提供用户培训、操作手册和知识库，帮助客户更好地使用系统。'
              },
              {
                question: '如何保证企业数据的安全性？',
                answer: '数据安全是我们最重视的问题之一。我们采用多层次的安全防护措施，包括数据加密、访问控制、安全审计、漏洞扫描、灾备备份等。我们的系统符合国家信息安全等级保护标准和相关行业的合规要求。此外，我们会定期进行安全培训和演练，确保安全措施的有效性。'
              },
              {
                question: '可以与我们现有的系统集成吗？',
                answer: '是的，我们的解决方案支持与各种主流系统的集成，包括ERP、CRM、HRM、OA、财务系统等。我们提供标准化的API接口和集成工具，能够实现数据同步和流程对接。在项目实施前，我们会对您现有的系统进行评估，制定最合适的集成方案。'
              }
            ]
          },
          {
            name: 'showContactButton',
            label: '显示联系按钮',
            type: 'boolean',
            defaultValue: true
          },
          {
            name: 'contactLink',
            label: '联系链接',
            type: 'text',
            defaultValue: '#contact',
            description: '联系按钮跳转的链接'
          }
        ]
      }
    ],
    
    events: [
      {
        name: 'faqToggle',
        label: '问答项展开/折叠',
        description: '当用户点击展开或折叠问答项时触发',
        parameters: [
          { name: 'index', type: 'number', description: '问答项索引' },
          { name: 'expanded', type: 'boolean', description: '是否展开' },
          { name: 'question', type: 'string', description: '问题内容' }
        ]
      },
      {
        name: 'contactClick',
        label: '联系按钮点击',
        description: '当用户点击"联系我们"按钮时触发',
        parameters: [
          { name: 'link', type: 'string', description: '联系链接' }
        ]
      },
      {
        name: 'dataLoaded',
        label: '数据加载完成',
        description: '从数据源加载数据完成时触发',
        parameters: [
          { name: 'data', type: 'array', description: '加载的FAQ数据' }
        ]
      },
      {
        name: 'dataLoadError',
        label: '数据加载失败',
        description: '从数据源加载数据失败时触发',
        parameters: [
          { name: 'error', type: 'object', description: '错误信息' }
        ]
      }
    ],
    
    actions: [
      {
        name: 'expandAll',
        label: '全部展开',
        description: '展开所有问答项'
      },
      {
        name: 'collapseAll',
        label: '全部折叠',
        description: '折叠所有问答项'
      },
      {
        name: 'toggleItem',
        label: '切换指定项',
        description: '展开或折叠指定索引的问答项',
        parameters: [
          { name: 'index', type: 'number', required: true, description: '问答项索引' }
        ]
      },
      {
        name: 'refresh',
        label: '刷新FAQ数据',
        description: '重新从数据源加载FAQ数据'
      }
    ]
  },
  
  props: {
    // 颜色配置
    primaryColor: {
      type: String,
      default: '#165DFF'
    },
    bgColor: {
      type: String,
      default: '#f9fafb'
    },
    
    // 数据源配置
    dataSourceUrl: {
      type: String,
      default: ''
    },
    
    autoLoad: {
      type: Boolean,
      default: true
    },
    children: {
      type: Array,
      default: () => []
    },
    // 样式配置
    itemRadius: {
      type: Number,
      default: 8,
      validator: (value) => value >= 0 && value <= 20
    },
    openFirstByDefault: {
      type: Boolean,
      default: true
    },
    allowMultipleOpen: {
      type: Boolean,
      default: false
    },
    
    children: {
      type: Array,
      default: () => []
    },
    // 内容配置
    showHeader: {
      type: Boolean,
      default: true
    },
    faqItems: {
      type: Array,
      default: () => [
        {
          question: '你们的解决方案适合哪些行业？',
          answer: '我们的解决方案具有很强的行业适应性，已成功应用于金融、制造、零售、医疗、教育、物流等多个行业。我们会根据不同行业的特点和需求，提供定制化的解决方案，确保系统能够满足行业特定的业务流程和合规要求。'
        },
        {
          question: '实施一套系统需要多长时间？',
          answer: '实施周期取决于解决方案的复杂度、企业规模和定制化需求。基础版方案通常可以在1-3个月内完成实施；企业版方案需要3-6个月；而大型定制化项目可能需要6-12个月。我们会在项目启动前提供详细的实施计划和时间节点。'
        },
        {
          question: '系统上线后提供哪些支持服务？',
          answer: '我们提供全方位的售后支持服务，包括系统运维、故障排除、性能优化、版本升级等。根据不同的服务方案，我们提供工作日8小时或7×24小时的技术支持。此外，我们还提供用户培训、操作手册和知识库，帮助客户更好地使用系统。'
        },
        {
          question: '如何保证企业数据的安全性？',
          answer: '数据安全是我们最重视的问题之一。我们采用多层次的安全防护措施，包括数据加密、访问控制、安全审计、漏洞扫描、灾备备份等。我们的系统符合国家信息安全等级保护标准和相关行业的合规要求。此外，我们会定期进行安全培训和演练，确保安全措施的有效性。'
        },
        {
          question: '可以与我们现有的系统集成吗？',
          answer: '是的，我们的解决方案支持与各种主流系统的集成，包括ERP、CRM、HRM、OA、财务系统等。我们提供标准化的API接口和集成工具，能够实现数据同步和流程对接。在项目实施前，我们会对您现有的系统进行评估，制定最合适的集成方案。'
        }
      ]
    },
    showContactButton: {
      type: Boolean,
      default: true
    },
    contactLink: {
      type: String,
      default: '#contact'
    }
  },
  
  data() {
    return {
      // 处理后的FAQ项目，添加展开状态
      processedFaqItems: [],
      // 数据源相关状态
      isLoading: false,
      originalFaqItems: [],
      localFaqItems: []
    };
  },
  
  watch: {
    // 当原始FAQ数据变化时更新处理后的数据
    faqItems: {
      handler(newVal) {
        this.originalFaqItems = [...newVal];
        this.localFaqItems = [...newVal];
        this.processFaqItems(newVal);
      },
      deep: true,
      immediate: true
    },
    
    // 当默认展开第一项的配置变化时更新
    openFirstByDefault(newVal) {
      if (newVal && this.processedFaqItems.length > 0) {
        this.processedFaqItems[0].expanded = true;
        this.$nextTick(() => {
          this.calculateContentHeights();
        });
      }
    },
    
    // 监听数据源URL变化
    dataSourceUrl: {
      handler(newVal) {
        if (newVal && this.autoLoad) {
          this.loadDataFromSource();
        }
      },
      immediate: true
    }
  },
  
  mounted() {
    // 初始化数据
    this.originalFaqItems = [...this.faqItems];
    this.localFaqItems = [...this.faqItems];
    
    // 计算内容高度
    this.$nextTick(() => {
      this.calculateContentHeights();
    });
    
    // 如果配置了自动加载且有数据源URL
    if (this.autoLoad && this.dataSourceUrl) {
      this.loadDataFromSource();
    }
  },
  
  methods: {
    /**
     * 处理FAQ项目，添加展开状态
     */
    processFaqItems(items) {
      this.processedFaqItems = items.map((item, index) => ({
        ...item,
        expanded: this.openFirstByDefault && index === 0,
        contentHeight: 0
      }));
    },
    
    /**
     * 从API数据源加载数据
     */
    async loadDataFromSource() {
      if (!this.dataSourceUrl) {
        console.warn('数据源URL为空，无法加载数据');
        return;
      }
      
      this.isLoading = true;
      
      try {
        // 发送请求获取数据
        const response = await fetch(this.dataSourceUrl);
        
        if (!response.ok) {
          throw new Error(`HTTP错误! 状态码: ${response.status}`);
        }
        
        const data = await response.json();
        
        // 验证数据格式
        let validData;
        if (Array.isArray(data)) {
          validData = data;
        } else if (data.faqItems && Array.isArray(data.faqItems)) {
          validData = data.faqItems;
        } else {
          throw new Error('数据格式不正确，需要包含FAQ项目数组');
        }
        
        // 更新本地数据
        this.originalFaqItems = [...validData];
        this.localFaqItems = [...validData];
        this.processFaqItems(validData);
        
        // 计算内容高度
        this.$nextTick(() => {
          this.calculateContentHeights();
        });
        
        // 通知父组件
        this.$emit('update:faqItems', [...validData]);
        this.$emit('dataLoaded', validData);
      } catch (error) {
        console.error('从数据源加载数据失败:', error);
        this.$emit('dataLoadError', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    /**
     * 刷新FAQ数据
     */
    refresh() {
      if (this.dataSourceUrl) {
        this.loadDataFromSource();
      } else {
        // 重置为原始数据
        this.localFaqItems = [...this.originalFaqItems];
        this.processFaqItems(this.originalFaqItems);
        
        // 计算内容高度
        this.$nextTick(() => {
          this.calculateContentHeights();
        });
        
        this.$emit('update:faqItems', [...this.originalFaqItems]);
      }
    },
    
    /**
     * 计算内容高度
     */
    calculateContentHeights() {
      const contentElements = this.$refs.faqContent;
      
      if (contentElements) {
        contentElements.forEach((el, index) => {
          if (el && this.processedFaqItems[index]) {
            this.processedFaqItems[index].contentHeight = el.scrollHeight;
          }
        });
      }
    },
    
    /**
     * 切换FAQ项的展开/折叠状态
     */
    toggleFaq(index) {
      // 如果不允许同时展开多项，先关闭其他项
      if (!this.allowMultipleOpen) {
        this.processedFaqItems.forEach((item, i) => {
          if (i !== index) {
            item.expanded = false;
          }
        });
      }
      
      // 切换当前项状态
      this.processedFaqItems[index].expanded = !this.processedFaqItems[index].expanded;
      
      // 触发事件
      this.$emit('faqToggle', {
        index,
        expanded: this.processedFaqItems[index].expanded,
        question: this.processedFaqItems[index].question
      });
    },
    
    /**
     * 全部展开
     */
    expandAll() {
      this.processedFaqItems.forEach(item => {
        item.expanded = true;
      });
    },
    
    /**
     * 全部折叠
     */
    collapseAll() {
      this.processedFaqItems.forEach(item => {
        item.expanded = false;
      });
    },
    
    /**
     * 切换指定项
     */
    toggleItem(index) {
      if (index >= 0 && index < this.processedFaqItems.length) {
        this.processedFaqItems[index].expanded = !this.processedFaqItems[index].expanded;
      }
    },
    
    /**
     * 处理联系按钮点击
     */
    handleContactClick() {
      this.$emit('contactClick', { link: this.contactLink });
      
      // 实际应用中可以添加跳转逻辑
      if (this.contactLink) {
        const targetElement = document.querySelector(this.contactLink);
        if (targetElement) {
          targetElement.scrollIntoView({ behavior: 'smooth' });
        }
      }
    }
  }
};
</script>